import { useEffect } from 'react'
import {useSelector,useDispatch} from 'react-redux'
// B4:导入 createAsyncThunk 创建的异步action
import {fetchMovieList} from '../store/cartSlice'

function AsyncData(props){
    const movieList = useSelector((state)=>state.cartStore.movieList)

    const dispatch = useDispatch()

    useEffect(()=>{
        // B5: 派发action,获取异步数据
        dispatch( fetchMovieList() )
    },[])

    return (
        <ul style={{display:"flex",width:800,flexWrap:"wrap",flexBasis:200}}>
            {
                movieList.map((item)=>(
                    <ol key={item.id}>
                        {/* <img src={item.img} width={100} height={200}/> */}
                        <p>{item.nm}</p>
                    </ol>
                ))
            }
           
        </ul>
    )
}

export default AsyncData;